<template>
	<view class="center column">
		<!-- 遍历显示详情图片，使用widthFix模式保持宽高比 -->
		<image mode="widthFix" @load="load"	lazy-load
			v-for="(url, index) in detailUrls" :key="index" :src="url"
		>
		</image>
		<image v-if="loading" class="loading" src="/static/images/loading.gif"></image>
		<text v-else class="footer-text">已经到达底部，没有更多内容了</text>
	</view>
</template>

<script>

	export default {

		props: {
			detailUrls: {
				type: Array, 
				default: () => [
					'https://img.alicdn.com/imgextra/i2/3603079088/O1CN01V8VO2y2H0M5Bx33L3_!!3603079088.jpg'
				]
			}
		},

		// 组件数据
		data() {
			return {
				loading: true, //是否加载中，默认为true表示正在加载
			}
		},

		// 组件方法
		methods: {
			// 图片加载完成回调函数
			load() {
				this.loading = false // 图片加载完，设置loading为false
			}
		}
	}

</script>

<style >
	// 图片样式，宽度100%
	image {
		width: 100%;
	}

	// loading动画样式
	.loading {
		height: 90rpx;  // 高度
		width: 90rpx;   // 宽度
		margin-top: 50rpx; // 上外边距
	}

	// 底部提示文字样式
	.footer-text {
		font-size: 30rpx; // 字体大小
		color: #777;      // 文字颜色
		margin: 20rpx 0;  // 上下外边距
	}
</style>
